<template>
    <!-- 分页 -->
    <el-pagination class="custom_page" 
    v-model:currentPage="currentPage" 
    v-model:page-size="pageSize"
    :total="total" 
    :page-sizes="pageSizes"
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange" />
</template> 

<script setup>
// defineEmits 用于定义组件可以触发的自定义事件
import { ref, defineEmits } from 'vue';
const currentPage = ref(1);
const pageSize = ref(10);
const pageSizes = [10, 15, 20, 30];
const total = ref(50)

// emit函数触发相应的事件，将变化的值传递给父组件。
const emit = defineEmits(['update:currentPage', 'update:pageSize']);

// 当每页显示条数发生变化时，触发handleSizeChange函数，将每页显示条数传递给父组件。
const handleSizeChange = (val) => {
    emit('update:pageSize', val);
    emit('update:currentPage',1);
}
// 当页数发生变化时，触发handleCurrentChange函数，将当前页数传递给父组件。
const handleCurrentChange = (val) => {
    emit('update:currentPage', val)
}
</script>
